<!-- @format -->

<script setup>
	// 封装一个通用的表格组件：
	// 1）表头不确定(表头的列数及字段名称都不确定，最好由开发者自定义)
	// 2）表体也不确定（表格展示的数据最好由开发者自定义）

	// 解决思路：
	// 1）表格组件接收数组(父传子)
	// 2）表头和表体都用插槽自定义

	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})
</script>

<template>
	<table class="bit-table">
		<thead>
			<tr>
				<slot name="thead"></slot>
			</tr>
		</thead>
		<tbody>
			<tr
				v-for="(item, index) in props.data"
				:key="item.id">
				<slot
					:row="item"
					:i="index"></slot>
			</tr>
		</tbody>
	</table>
</template>

<style lang="scss">
	.bit-table {
		width: 1000px;
		border-spacing: 0;
		margin: 20px auto;
		text-align: center;
		font-family: Microsoft YaHei UI;
		.cover {
			height: 130px;
			vertical-align: middle;
		}
		th {
			background: #f3f5f7;
		}

		td,
		th {
			padding: 12px 6px;
			border-bottom: 3px solid rgb(245, 108, 108);
		}
		td.feature {
			width: 210px;
		}
	}
</style>
